<template>
  <a-modal v-model="visible" title="自定义打印" width="80%">
    <template slot="footer" class="modelBtn">
      <a-button @click="visible = false">关闭</a-button>
      <a-button type="primary" v-print="'#printArea'" @click="visible = false"
        >打印</a-button
      >
    </template>
    <div class="set">
      <h3>打印设置</h3>
      <span
        >标签数量： <a-input-number v-model="tagsQuantity" :min="1" :max="50"
      /></span>
      <span>字体大小： <a-input-number v-model="fontSizes" :min="10"/></span>
      <span
        >标签边距： 上：<a-input-number
          v-model="margiTop"
          :min="10"/>下：<a-input-number
          v-model="margiBottom"
          :min="10"/>左：<a-input-number
          v-model="margiLeft"
          :min="10"/>右：<a-input-number v-model="margiRight" :min="10"
      /></span>
      <span>单个标签宽度：<a-input-number v-model="tagsWidth" :min="10"/></span>
      <span style="margin-left: 10px">
        <a-checkbox v-model="textFlag"> 是否显示MADE IN CHINA </a-checkbox>
      </span>
    </div>

    <div class="tags" id="printArea">
      <div
        class="TagsItem"
        v-for="(item, i) in tagsQuantity"
        :key="i"
        :style="{
          'font-size': `${fontSizes}px`,
          'margin-top': `${margiTop}px`,
          'margin-bottom': `${margiBottom}px`,
          'margin-left': `${margiLeft}px`,
          'margin-right': `${margiRight}px`
        }"
      >
        <div>{{ productTag }}</div>
        <div>
          <img class="barcode" :style="{ width: `${tagsWidth}px` }" />
        </div>
        <div>
          {{ sku }}
        </div>
        <div v-if="textFlag">MADE IN CHINA</div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import JsBarcode from "jsbarcode";
// import { barcode } from "@/apis/common";
export default {
  data() {
    return {
      textFlag: false,
      visible: false,
      tagsQuantity: 5,
      captchaImg: "",
      sku: "",
      fontSizes: 18,
      margiTop: 10,
      margiBottom: 10,
      margiLeft: 10,
      margiRight: 10,
      tagsWidth: 200,
      productTag: ""
    };
  },
  mounted() {
    this.rowTags();
  },
  updated() {
    this.getJsBarcode();
  },
  methods: {
    rowTags() {
      this.$bus.$off("SkuListTags");
      this.$bus.$on("SkuListTags", async rowData => {
        this.visible = true;
        this.sku = rowData.sku;
        this.productTag = rowData.productTag;
        this.getJsBarcode();
      });
    },
    getJsBarcode() {
      JsBarcode(".barcode", this.productTag, {
        format: "CODE128", //选择要使用的条形码类型
        width: 3, //线宽
        height: 80, //条码高度
        displayValue: false, //是否显示文字信息
        fontSize: this.fontSizes //设置文本的大小
      });
    }
  }
};
</script>

<style lang="less" scoped>
.set {
  input {
    width: 50px;
  }
}
.tags {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.set span {
  display: inline-block;
  margin: 5px;
}
</style>
